<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:300px;height:300px;background: red;}
        .box2{width:200px;height:200px;background: green;}
        .box3{width:100px;height:100px;background: blue;}
    </style>
</head>
<body>
    <div id="app">
        <!-- 鼠标常见事件的修饰符 -->
        <div @contextmenu="fn1" class="box1">
            <div @contextmenu.once="fn2" class="box2">
                <div @contextmenu.stop.prevent="fn3" class="box3"></div>
            </div>
        </div>
        <!-- 键盘事件的修饰符：一般用来修饰键码 -->
        <input type="text" @keyup.enter="fn4">
        <input type="text" @keyup.shift="fn4">
        <input type="text" @keyup.shift.enter="fn4">
    </div>
</body>
<script src="./libs/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
            fn1(){
                alert("red")
            },
            fn2(){
                alert("green")
            },
            fn3(){
                alert("blue")
            },
            fn4(){
                console.log("键盘事件")
            }
        }
    })
</script>
</html>